<script setup>
import { ref, computed } from "vue";
import { logout } from "@/utils/index";
import MyCourses from "./components/MyCourses/index.vue";
import MyProfile from "./components/MyProfile/index.vue";
import ChangePassword from "./components/ChangePassword/index.vue";
const activeIndex = ref("1");
const menuList = [
  { id: "1", name: "我的课程", component: MyCourses },
  { id: "2", name: "账户资料", component: MyProfile },
  { id: "3", name: "修改密码", component: ChangePassword },
];
const handleSelectMenu = (menu) => {
  activeIndex.value = menu.id;
  if (menu.id === "4") logout();
};
const activeMenu = computed(() =>
  menuList.find((item) => item.id === activeIndex.value)
);
</script>
<template>
  <div class="page-container pt-3">
    <div class="row">
      <div class="col-2">
        <div class="bg-white shadow-sm rounded">
          <el-menu :default-active="activeIndex">
            <el-menu-item
              v-for="menu in menuList"
              :key="menu.id"
              :index="menu.id"
              @click="handleSelectMenu(menu)"
              >{{ menu.name }}</el-menu-item
            >
          </el-menu>
        </div>
      </div>
      <div class="col-10">
        <div class="bg-white shadow-sm rounded p-3">
          <h6 class="mb-4">{{ activeMenu.name }}</h6>
          <component :is="activeMenu.component" />
        </div>
      </div>
    </div>
  </div>
</template>
